<template>
    <div>
      <p class="block_title">{{$t('m.translate')}}</p>
      <div class="trans_box">
        <div class="wrap clearfix">
          <p @click="pickLang(1)" class="fl clearfix">
            <!--<img class="fl" src="../static/img/g1@3x.png"/>-->
            <span>{{langCheck01Flag}}</span>
          </p>
          <img class="to fl" src="../static/img/icon_back@3x.png"/>
          <p @click="pickLang(2)" class="fr clearfix">
            <!--<img class="fr" src="../static/img/g1@3x.png"/>-->
            <span>{{langCheck02Flag}}</span>
          </p>
        </div>
        <div class="bottom clearfix">
          <!--<div class="fl">
            <img src="../static/img/trans1.png"/>
            <p>{{$t('m.trans1')}}</p>
          </div>-->
          <div @click="test" class="fr">
            <img src="../static/img/trans2.png"/>
            <p>{{$t('m.trans2')}}</p>
          </div>
        </div>

      </div>
    </div>
</template>

<script>
  import md5 from 'js-md5';
  import { MessageBox } from 'mint-ui';
    export default {
      data(){
        return{
          langCheck01:1,
          langCheck01Flag:'中文',
          langCheck02:2,
          langCheck02Flag:'英文',
          langType:[
            {label: '中文', value: 1},
            {label: '英文', value: 2},
            {label: '日语', value: 3},
            {label: '法语', value: 4},
            {label: '德语', value: 5},
            {label: '俄语', value: 6},
            {label: '韩语', value: 7},
            {label: '意大利语', value: 10},
            {label: '西班牙语', value:11},
            {label: '葡萄牙语', value: 12},
            {label: '阿拉伯语', value: 13},
            {label: '泰语', value: 20},
          ],
          appKey: '1D2508B714748B3A21966B116FB987C9',
          appScrect: 'e06df23f5ca3f9d5283d2b61c1e41696',
          transApi:''
        }
      },
      methods:{
        pickLang(key){
          let that = this;
          weui.picker(that.langType, {
            className: 'custom-classname',
            container: 'body',
            defaultValue: [1],
            onConfirm: function (result) {
              console.log(result[0])
              if(key===1){
                that.langCheck01Flag = result[0].label;
                that.langCheck01 = result[0].value;
              }else {
                that.langCheck02Flag = result[0].label;
                that.langCheck02 = result[0].value;
              }
            },
            id: 'singleLinePicker'
          })
        },
        test(){
          let that = this;
          let mdString = 'appKey='+this.appKey+'&appSecret='+this.appScrect+'&srcLangId='+this.langCheck01+'&tarLangId='+this.langCheck02+'&thirdInPolicy=2'+'&userPhone=+86'+sessionStorage.getItem('phone');
          console.log(mdString)
          let mdResult = md5(mdString);
          console.log(mdResult)
          if(!that.transApi){
            MessageBox('请稍等，正在获取呼叫接口地址');
            return
          }
          this.$axios({
//            url:'http://test-core.itakeeasy.cn/transn/sandbox/call',
//             url:'/transn/sandbox/call',
            url:that.transApi,
            method:'POST',
            params:{
              appKey:that.appKey,
              srcLangId:that.langCheck01,
              tarLangId:that.langCheck02,
              userPhone:'+86'+sessionStorage.getItem('phone'),
              thirdInPolicy:2,
              sign:mdResult,
            }
          }).then((res) => {
            if(res.data.result==='0'){
              MessageBox(res.data.msg)
            }else {
              if(res.data.data.callResult==='Busy'){
                MessageBox('译员全忙，请稍后再试')
              }else if(res.data.data.callResult==='NoMatch'){
                MessageBox('没有找到符合的译员，请选择其他语言后再试')
              }else {
                MessageBox('你的订单分派成功，请等待译员抢单!')
              }
            }
            console.log(res)
          }).catch((res)=>{
            MessageBox('呼叫失败请重试');
          })
        },
        getApiUrl(){
          let that = this;
          this.$axios({
            url:that.$store.state.apiUrl+'interfaceMapping/telephoneInterface?id=1',
            method:'get',
          }).then(function (res) {
            if(res.data.status){
              that.transApi = res.data.data.url
            }else {
              MessageBox('呼叫接口地址获取失败');
            }
          }).catch(function () {
            MessageBox('服务期错误，呼叫接口地址获取失败');
          })
        }
      },
      mounted(){
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      },
      created(){
        this.$store.state.showTab = true;
        this.getApiUrl();

      }
    }
</script>

<style scoped>
  .trans_box{background: #FFFFFF;box-shadow: 0 2px 6px 0 rgba(0,0,0,0.10);border-radius: 5px;width: 3.45rem;height: 1.9rem;margin: 0 auto;padding: 0.2rem 0.32rem 0;}
  .wrap p{width:1.15rem;height: 0.46rem;background: rgba(255,255,255,0.10);border: 1px solid #CCCCCC;border-radius: 100px;padding: 0 0.05rem}
  .wrap p img{width: 0.35rem;height: 0.35rem;display: block;margin-top: 0.05rem}
  .wrap p span{line-height: 0.46rem;display: block;text-align: center;font-size: 0.14rem;}
  .wrap .to{width: 0.11rem;line-height: 0.2rem;display: block;margin-top: 0.13rem;margin-left: 0.2rem }
  /*.bottom{padding: 0.24rem 0.25rem 0}*/
  .bottom{padding: 0.24rem 1.1rem 0}
  .bottom img{width: 0.55rem;height: 0.55rem;display: block}
  .bottom p{font-size: 0.14rem;color: #333;margin-top: 0.1rem}
</style>
